/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 房间密码锁遮罩 -->
		<view class="passwordshow" v-if="password_lock">
			<input type="password" placeholder="请输入密码" @input="passwordChanged" />
			<button type="primary" @click="checkpassword">确认</button>
		</view>
		<!-- 直播 -->
		<view class="zhibo">
			<!-- #ifndef MP -->
			<video class="video" object-fit='fill' autoplay='false' id="myVideo" :src="zhiboInfo.blurl" @error="videoErrorCallback" @timeupdate="video_timeUpdate" @fullscreenchange="fullscreen" :controls="video_controls" show-center-play-btn enable-play-gesture x5-video-player-type="h5"
				x5-video-player-fullscreen="true"
				x5-video-orientation="portrait"></video>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<live-player
			  :src="zhiboInfo.mpblurl"
			  mode='live'
			  autoplay='false'
			  object-fit='fillCrop'
			  @statechange="statechange"
			  @error="error"
			  style="width: 100%; height: 400upx;"
			/>
			<!-- #endif -->
		</view>
		<!-- 详情、互动、课件 -->
		<view class="qiehuan-part">
			<view class="qiehuan-part-title">
				<view class="qiehuan-part-title-item" v-for="(item, index) in kechengList" :key="index">
					<view @click="muluchange(index)" :class="{btna:btnnum == index}">{{item}}</view>
					<text :class="{_underline: btnnum == index}"></text>
				</view>
			</view>
			
			<view class="remind" v-if="zhiboInfo.zbinfo.state==0">
				<image src="../../static/tixing.png" mode="aspectFit"></image>
				<text>直播时间：{{zhiboInfo.zbinfo.zbtime}}</text>
<!-- 				<text @click="postLiveKbtx" v-if="zhiboInfo.is_tx==0">开启</text>
				<text style="background-color: #2196f3;" v-else>已开启</text> -->
			</view>
			<view class="qiehuan-part-content">
				
				<!-- 详情 -->
				<view class="details" :class="{dis:btnnum == 0}" :model="zhiboInfo">
					<view class="details-tutor">
						<view class="details-tutor-top" >
							<image src="../../static/kechengjianjie.png" mode="aspectFit"></image>
							<text>讲师介绍</text>
						</view>
						<view class="details-tutor-info" @click="navigate('tutor-introduced',zhiboInfo.zbinfo.tid)">
							<view class="details-tutor-info-right">
								<text>讲师主页</text>
							</view>
						</view>
						
					</view>
					<view class="details-tutor-bottom">
						<jyf-parser :html="introduce" ></jyf-parser>
					</view>
					<view class="details-course">
						<view class="details-course-top">
							<image src="../../static/kechengjiangshi.png" mode="aspectFit"></image>
							<text>课程介绍</text>
						</view>
						<view class="details-course-bottom">
							<image :src="zhiboInfo.zbinfo.thumb" mode="aspectFit"></image>
							{{zbjianjie}}
						</view>
					</view>
				</view>
				
				
				<!-- 互动 -->
				<scroll-view scroll-y="true" @click="usersshowclose()" class="interact"  :class="{dis:btnnum == 1, newinteract: isOpen == 1}" @scroll="scrollChange" @scrolltolower="scrolltolower" :scroll-into-view="lastmsgid">
					<view class="interact-list" v-for="(item, index) in messageList" :key="index">
						<view v-if="item.msg_type=='login' ">
							<view class="interact-list-left" :id="'msg'+index">
								<view class="left-info">
									<text decode>系统消息:</text>
									<view class="info-context"><text style="background-color: #eee;">欢迎{{item.nickname}}进入直播间</text></view>
								</view>
							</view>
						</view>
						<view v-else-if="item.msg_type=='xitong' ">
							<view class="interact-list-left" :id="'msg'+index">
								<view class="left-info">
									<text decode>{{item.nickname}}</text>
									<view class="info-context"><text style="background-color: #eee;">{{item.msg}}</text></view>
								</view>
							</view>
						</view>
						<view v-else>
							<!-- 自己发的消息 -->
							<view v-if="item.uid == userinfo.uid" class="interact-list-right" :id="'msg'+index">
								<view class="right-info">
									<text decode>{{item.nickname}}</text>
									<view class="info-context"><text>{{item.send_msg}}</text></view>
								</view>
								<image class="right" :src="item.avatar" mode="aspectFit"></image>
							</view>
							
							<!-- 别人发来的消息 -->
							<view v-else class="interact-list-left" :id="'msg'+index">
								<image class="left" :src="item.avatar" mode="aspectFit"></image>
								<view class="left-info">
									<text decode>{{item.nickname}}</text>
									<view class="info-context"><text>{{item.send_msg}}</text></view>
								</view>
							</view>
						</view>
					</view>
						
				</scroll-view>
				<!-- 用户列表 -->
				<scroll-view scroll-y="true" class="userlist" v-if="usersshow">
					<view class="totalnum">
						用户列表 共{{allusers.length}}人
					</view>
					<view class="closeusers" @click="usersshowclose()">X</view>
					<view v-for="(item,index) in allusers" :key="index">
						<view class="userinfo">
							{{item}} 在线
						</view>
					</view>
				</scroll-view>
				<!-- 发送消息 -->
				<view class="send">
					<image src="/static/users.png" mode="" @click="usersshowbtn"></image>
					<input type="text" @input="changeMsg" placeholder="说点什么..." :value="sendMessage" />
					<button @click="sendMsg" type="primary" v-if="zhiboInfo.zbinfo.is_jy==0">发送</button>
					<button type="primary" v-if="zhiboInfo.zbinfo.is_jy==1" style="background: #eee;">禁言中</button>
					<button @click="connectmic" type="primary">连麦</button>
				</view>
			
				<!-- 课件下载 -->
				<view class="kejian" :class="{dis:btnnum == 2}">
					<view class="kejian-list" v-if="files.length > 0">
						<view class="item" v-for="(item, index) in files" :key="index">
							<view>
								<text>{{index + 1}}.</text>
								<image v-if='item.type==1' src="../../static/img.png" mode="aspectFit"></image>
								<image v-else-if='item.type==2' src="../../static/xls.png" mode="aspectFit"></image>
								<image v-else-if='item.type==3' src="../../static/pdf.png" mode="aspectFit"></image>
								<image v-else-if='item.type==4' src="../../static/doc.png" mode="aspectFit"></image>
								<image v-else-if='item.type==5' src="../../static/ppt.png" mode="aspectFit"></image>
								<image v-else-if='item.type==0' src="../../static/file.png" mode="aspectFit"></image>
								<text>{{'['+item.media+']'}}</text>
								<text>{{item.name}}</text>
							</view>
							<view @click="download(item.path,item.type)">
								<image src="../../static/download.png" mode="aspectFit"></image>
								<text style="color: #4CD964;font-weight: 700;">下载</text>
							</view>
						</view>
					</view>
					<image v-else class="nopl" src="../../static/wudingdan.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { checkUserinfo } from '@/request/checkUserinfo'
	import { postLiveDetail, postLiveKbtx } from '@/request/zhibo.js'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	let socketTask;
	export default {
		components:{
			jyfParser
		},
		data() {
			return {
				kechengList: ['详情', '互动', '课件'],
				btnnum: 0,
				courseWare: [],
				zhiboInfo: {},
				HOST_URL:uni.HOST_URL,
				issocketOpen: false,
				sendMessage: '',
				userinfo: '',
				msg_type:'say',
				zbid:'',
				messageList: [],
				lastmsgid:'',
				zbjianjie:'', // 详情中的直播简介
				introduce: '' ,// 详情中的讲师简介
				password_lock:false,
				inputPassword:'',
				allusers:[],
				usersshow:false,
				files:[],//课件
				video_controls:true
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(option) {
			console.log('携带参数',option);
			//#ifdef MP
			const BASE_URL = uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/set/base_set',
				method:'GET',
				success:(res) =>{
					console.log(res.data);
					let set=res.data.data
					if(set.smallapp){
						if(set.smallapp.is_sh==1){
							uni.setNavigationBarTitle({
							    title: '课程学习'
							});
						}else{
							uni.setNavigationBarTitle({
							    title: '课程直播'
							});
						}
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
			//#endif
			this.zbid=option.id
			checkUserinfo()
			let userinfo = uni.getStorageSync('userinfo')
			this.userinfo = userinfo
			if(userinfo.uid){
				postLiveDetail({id: option.id, uid: userinfo.uid}).then(res => {
					console.log(res.data)
					this.zhiboInfo = res.data.data
					this.files = res.data.data.files
					this.zbjianjie = res.data.data.zbinfo.zbjianjie
					if(res.data.data.zbinfo.password!='' && res.data.data.zbinfo.password!=null){
						this.password_lock = true
					}
					this.introduce = res.data.data.tinfo.introduce
				})
				//获取聊天内容
				if(uni.issocketOpen == true){
					this.issocketOpen = true;
					this.sendMsg('login');
				}
			}
		},
		onUnload() {
			// // #ifdef MP-TOUTIAO
			// if (socketTask) {
			//   socketTask.close({
			// 	success: (res) => {
			// 	  // 关闭成功的回调
			// 	  console.log("close success", res);
			// 	},
			// 	fail: (res) => {
			// 	  // 关闭失败的回调
			// 	  console.log("close fail", res);
			// 	},
			//   });
			// }
			// // #endif
			// // #ifndef MP-TOUTIAO
			// uni.closeSocket()
			// // #endif
		},
		onShow() {
			// #ifdef MP-TOUTIAO
			if (socketTask) {
			    return;
			}
			const WSS_URL = uni.WSS_URL;
			socketTask = tt.connectSocket({
			  url: WSS_URL,
			  success: (res) => {
				// 创建成功的回调
				console.log("创建成功", res);
			  },
			  fail: (res) => {
				// 创建失败的回调
				console.log("创建失败", res);
			  }
			});
			socketTask.onMessage((res) => {
				console.log('收到服务器内容：' + res.data);
				let msgList = JSON.parse(res.data)
				msgList.avatar = decodeURIComponent(msgList.avatar)
				if(msgList.msg_type === 'say') this.messageList.push(msgList)
				this.lastmsgid='msg'+(this.messageList.length-1)
				if(msgList.msg_type === 'login') {
					this.messageList.push(msgList)
					this.lastmsgid='msg'+(this.messageList.length-1)
					if(msgList.uid==this.userinfo.uid){
						var xitongmsg={
							'msg_type':'xitong',
							'msg':'请您文明发言，严禁发布涉政、黄赌毒等违法信息',
							'nickname':'系统消息:'
						}
						this.messageList.push(xitongmsg)
						this.lastmsgid='msg'+(this.messageList.length-1)
					}
				}
				if(msgList.type === 'logout') {
					var user =[]
					if(msgList.client_list){
						for(const key in msgList.client_list){
							// console.log(msgList.client_list[key])
						   user.push(msgList.client_list[key])
						}
						this.allusers=user
					}
					var xitongmsg={
						'msg_type':'xitong',
						'msg':msgList.from_client_name+'离开了直播间',
						'nickname':'系统消息:'
					}
					this.messageList.push(xitongmsg)
					this.lastmsgid='msg'+(this.messageList.length-1)
				}
				if(msgList.msg_type === 'ping') {
					socketTask.send({
						data: '{"msg_type":"pong"}'
					});
				}
				if(msgList.type === 'login') {
					var user =[]
					for(const key in msgList.client_list){
						// console.log(msgList.client_list[key])
					   user.push(msgList.client_list[key])
					}
					this.allusers=user
				}
			});
			// #endif
			// #ifndef MP-TOUTIAO
			uni.onSocketMessage(res => {
			    console.log('收到服务器内容：' + res.data);
				let msgList = JSON.parse(res.data)
				msgList.avatar = decodeURIComponent(msgList.avatar)
				if(msgList.msg_type === 'say') this.messageList.push(msgList)
				this.lastmsgid='msg'+(this.messageList.length-1)
				if(msgList.msg_type === 'login') {
					this.messageList.push(msgList)
					this.lastmsgid='msg'+(this.messageList.length-1)
					if(msgList.uid==this.userinfo.uid){
						var xitongmsg={
							'msg_type':'xitong',
							'msg':'请您文明发言，严禁发布涉政、黄赌毒等违法信息',
							'nickname':'系统消息:'
						}
						this.messageList.push(xitongmsg)
						this.lastmsgid='msg'+(this.messageList.length-1)
					}
				}
				if(msgList.type === 'logout') {
					var user =[]
					if(msgList.client_list){
						for(const key in msgList.client_list){
							// console.log(msgList.client_list[key])
						   user.push(msgList.client_list[key])
						}
						this.allusers=user
					}
					var xitongmsg={
						'msg_type':'xitong',
						'msg':msgList.from_client_name+'离开了直播间',
						'nickname':'系统消息:'
					}
					this.messageList.push(xitongmsg)
					this.lastmsgid='msg'+(this.messageList.length-1)
				}
				if(msgList.msg_type === 'ping') {
					uni.sendSocketMessage({
						data: '{"msg_type":"pong"}'
					})
				}
				if(msgList.type === 'login') {
					var user =[]
					for(const key in msgList.client_list){
						// console.log(msgList.client_list[key])
					   user.push(msgList.client_list[key])
					}
					this.allusers=user
				}
			});
			uni.onSocketError(res => {
			  console.log('WebSocket连接打开失败，请检查！');
			});
			// #endif
		},
		methods: {
			connectmic(){
				uni.showToast({
					title:'主播暂未在线，暂无法连麦',
					icon:'none'
				})
			},
			download(url,type){
				// #ifndef H5
				uni.showLoading({
					title:'下载中...'
				})
				uni.downloadFile({
				    url: url,
				    success: (res) => {
				        if (res.statusCode === 200) {
								if(type==1){
									uni.previewImage({
									  urls: [res.tempFilePath],
									  longPressActions: {
										  itemList: ['发送给朋友', '保存图片', '收藏'],
										  success: function(data) {
											  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
										  },
										  fail: function(err) {
											  console.log(err.errMsg);
										  }
									  }
									});
								}else{
									uni.saveFile({
									  tempFilePath: res.tempFilePath,
									  success: (res)=> {
										  uni.hideLoading();
										  uni.showToast({
											title:'下载成功'
										  })
										  var savedFilePath = res.savedFilePath;
										  uni.showModal({
										      title: '文件保存地址为',
										      content: savedFilePath,
											  confirmText:'预览文件',
										      success: (res)=> {
										          if (res.confirm) {
													  uni.openDocument({
														filePath: savedFilePath,
														showMenu: true,
														success: (res)=> {
															console.log('打开文档成功');
														}
													  });
										          }
										      }
										  });
									  }
									});
								}
				        }else{
							uni.hideLoading();
							uni.showModal({
							    title: '下载报错原因:',
							    content: JSON.stringify(res),
							    success: (res)=> {
							        if (res.confirm) {
							        }
							    }
							});
						}
				    }
				});
				// #endif
				// #ifdef H5
				window.open(url);
				// #endif
			},
			usersshowclose(){
				this.usersshow=false
			},
			usersshowbtn(){
				this.usersshow=this.usersshow==true?false:true
			},
			passwordChanged(e){
				this.inputPassword = e.target.value;
			},
			checkpassword(){
				if(this.inputPassword ==''){
					uni.showToast({
						title:'密码不能为空',
						icon:'none'
					})
					return false
				}
				if(this.inputPassword == this.zhiboInfo.zbinfo.password){
					this.password_lock = false
				}else{
					uni.showToast({
						title:'密码不正确,请重试!',
						icon:'none'
					})
					return false
				}
			},
			navigate (e,tid) {
				uni.navigateTo({
					url: `/pages/teacher-center/${e}/${e}?tid=${tid}`
				});
			},
			// 开播提醒
			postLiveKbtx() {
				postLiveKbtx({uid: this.userinfo.uid, liveid: this.zbid}).then(res => {
					if(res.data.code == 0) {
						uni.showToast({
							title: '设置成功'
						})
						this.zhiboInfo.is_tx = 1
					}
				})
			},
			scrolltolower(){
				this.lastmsgid='msg'+(this.messageList.length-1)
			},
			scrollChange(e) {
				this.lastmsgid=''
			},
			changeMsg(e){
				this.sendMessage=e.detail.value
			},
			muluchange(e) {
				this.btnnum = e
			},
			statechange(e){
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				console.error('live-player error:', e.detail.errMsg)
			},
			// 创建websocket链接
			connectSocketInit() {
				const WSS_URL = uni.WSS_URL
				uni.connectSocket({
					url: WSS_URL
				})
			},
			// 点击发送消息
			sendMsg(e) {
				if(uni.issocketOpen == false){
					uni.showToast({
						title:'请检查websocket连接',
						icon:'error'
					})
					return false;
				}
				var data = {
						uid: this.userinfo.uid,
						msg_type:this.msg_type,
						nickname: this.userinfo.userdata.nickname,
						avatar: encodeURIComponent(this.userinfo.userdata.avatar),
						live_type: 'course',
						zbid: this.zbid
					}
				if(e=='login'){
					if(this.issocketOpen) {
						data.msg_type='login'
						// #ifndef MP-TOUTIAO
						uni.sendSocketMessage({
							data: JSON.stringify(data),
							success: res => {
								console.log(res)
							}
						})
						// #endif
						// #ifdef MP-TOUTIAO
						socketTask.send({
							data: JSON.stringify(data),
							success: (res) => {
							  console.log("send success", res);
							}
						});
						// #endif
					}
				}else{
					if(this.msg_type=='say'){
						if(this.sendMessage==''){
							uni.showToast({
								title:'发送内容不能为空',
								icon:'none'
							})
							return false
						}else{
							data.send_msg=this.sendMessage
							if(this.issocketOpen) {
								// #ifndef MP-TOUTIAO
								uni.sendSocketMessage({
									data: JSON.stringify(data),
									success: res => {
										this.sendMessage=''
									}
								})
								// #endif
								// #ifdef MP-TOUTIAO
								socketTask.send({
									data: JSON.stringify(data),
									success: (res) => {
									  console.log("send success", res);
									  this.sendMessage='';
									}
								});
								// #endif
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.zhibo {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	width: 100%;
	height: 400upx;
	background-color: #000;
	.video {
		width: 750upx;
		height: 400upx;
	}
}
	.userlist{
		border-radius: 8rpx;
		width: 50%;
		height: calc(100vh - 580upx);
		background-color: rgba(7,7,7,.6);
		position: fixed;
		padding: 0 10upx;
		left:0;
		bottom:80rpx;
		color: #fff;
		.closeusers{
			position: absolute;
			right: 10upx;
			top:10upx;
		}
		.totalnum{
			font-weight: 700;
			margin:15rpx 0;
			font-size: 32rpx;
		}
		.userinfo{
			padding: 5rpx;
			border-bottom: 1rpx solid #eee;
		}
	}
.passwordshow{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgba(9,9,9,.9);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 30upx;
	input{
		margin-bottom: 20upx;
		background-color: #fff;
		color: #555;
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
	}
}
// 直播
.qiehuan-part {
	&-title{
		height: 100upx;
		background-color: #fff;
		padding-top: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			view {
			font-size: 30upx;
			color: #575757;
			}
			.btna { // 需要追加到view上的class
				font-weight: 700;
				color: #131313;
			}
			._underline { // 需要追加到view下方的下划线class
				width: 70upx;
				height: 7upx;
				background-color: #2f77ff;
				border-radius: 5upx;
				margin-top: 15upx;
			}
		}
	}
	
	.remind {
		height: 60upx;
		background-color: #e8d1a6;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 40upx;
			height: 40upx;
		}
		text:nth-child(2) {
			font-size: 24upx;
			color: #333;
			margin-left: 10upx;
		}
		text:nth-child(3) {
			height: 40upx;
			font-size: 26upx;
			color: #fff;
			border-radius: 40upx;
			padding: 0 20upx;
			background-color: orange;
			line-height: 40upx;
			margin-left: 10upx;
		}
	}
	
	
	&-content {
		// 详情
		.details {
			padding: 0 20upx;
			background-color: #fff;
			display: none;
			&-course {
				background-color: #fff;
				margin-bottom: 100upx;
				&-top {
					height: 80upx;
					display: flex;
					align-items: center;
					image {
						width: 50upx;
						height: 50upx;
					}
					text {
						font-size: 28upx;
						font-weight: 700;
						color: #333;
						margin-left: 10upx;
					}
				}
				&-bottom {
					display: flex;
					flex-direction: column;
					image {
						width: 100%;
					}
					text {
						font-size: 30upx;
						color: #333;
					}
				}
			}
			&-tutor {
				
				margin-top: 20upx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				&-top {
					height: 80upx;
					display: flex;
					align-items: center;
					image {
						width: 50upx;
						height: 50upx;
					}
					text {
						font-size: 30upx;
						font-weight: 700;
						color: #333;
						margin-left: 10upx;
					}
				}
				&-info {
					height: 80upx;
					padding: 0 20upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-left {
						display: flex;
						align-items: center;
						image {
							width: 50upx;
							height: 50upx;
							border-radius: 50%;
						}
						text {
							font-size: 30upx;
							color: #333;
							margin-left: 10upx;
						}
					}
					&-right {
						text {
							font-size: 28upx;
							color: #555;
						}
					}
				}
				&-bottom {
					
					padding: 0 20upx;
					display: flex;
					align-items: center;
					text {
						font-size: 28upx;
						color: #333;
					}
				}
			}
		}
		.send {
			width: 750upx;
			height: 80upx;
			padding: 0 10upx;
			box-sizing: border-box;
			border-top: 2upx solid #ddd;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			image{
				width: 50upx;
				height: 40upx;
				margin-left: 10upx;
				margin-right: 20upx;
			}
			input {
				border: 2upx solid #ddd;
				width: 370upx;
				height: 50upx;
				border-radius: 10upx;
			}
			button {
				height: 55upx;
				background-color: #07b35d;
				line-height: 55upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 6upx;
			}
		}
		// 互动
		.interact {
			height: calc(100vh - 640upx);
			display: none;
			padding: 10upx 20upx;
			box-sizing: border-box;
			// background-color: orange;
			&-list {
				margin-bottom: 10upx;
				&-left {
					display: flex;
					.left {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
					}
					.left-info {
						margin-left: 20upx;
						text {
							font-size: 28upx;
							color: #a4a6a6;
						}
						.info-context {
							margin-top: 10upx;
							text {
								display: block;
								max-width: 480upx;
								font-size: 28upx;
								color: #333;
								background-color: #a5ec72;
								padding: 4upx 10upx;
								border-radius: 5upx;
							}
						}
					}
				}
				&-right {
					display: flex;
					justify-content: flex-end;
					.right-info {
							text-align: right;
							margin-right: 20upx;
							margin-top: 10upx;
							text {
								font-size: 28upx;
								color: #a4a6a6;
								position: relative;
								right: 0;
							}
							.info-context {
								margin-top: 10upx;
								text {
									display: block;
									max-width: 480upx;
									font-size: 28upx;
									color: #333;
									text-align: left;
									background-color: #e8e8e8;
									padding: 4upx 10upx;
									border-radius: 5upx;
								}
							}
						}
						.right {
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
						}
					}
				}
		}
		.newinteract {
			height: calc(100vh - 580upx);
		}
		
		// 课件
		.kejian{
			display: none;
			text-align: center;
			background-color: #fff;
			&-list{
				.item{
					font-size: 25rpx;
					color: #555;
					letter-spacing: 5rpx;
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					display: flex;
					padding: 25rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					view{
						display: flex;
						align-items: center;
					}
				}
			}
			.nopl{
				width: 500upx;
			}
			.dis{
				display: block;
			}
		}
		.dis{
			display: block;
		}
	}
}
</style>
